<template>
  <div class="home">
    <!--  顶部导航栏  -->
    <nav-bar>
      <div slot="center">首页</div>
    </nav-bar>

    <!-- 流行、新款、精选标题 -->
    <tab-control :titles="titles" @clickGood="clickGood" ref="tabControl1" class="tabCon1" v-show="isTabFixed"/>

    <!-- 滚动组件 -->
    <scroll class="wrapper"
            ref="scroll"
            @scroll="scrollPosition"
            :probe-type="3"
            :pull-up-load="true"
            @pullingUp="loadMore">
      <!-- 轮播图 -->
      <home-swiper :bannerList="bannerList" @swiperImageLoad="swiperImageLoad"/>

      <!-- 推荐 -->
      <home-recommend :recommendList="recommendList"/>

      <!-- 功能 -->
      <feature/>

      <!-- 流行、新款、精选标题 -->
      <tab-control :titles="titles" @clickGood="clickGood" ref="tabControl2"/>

      <!-- 商品列表 -->
      <goods :goodList="goodList"/>

    </scroll>

    <!-- 向上返回按钮 -->
    <back-top @click.native="backTop" v-show="isShowBackTop"/>

  </div>
</template>

<script>
  import NavBar from "components/common/navbar/NavBar";
  import TabControl from "components/content/tabControl/TabControl";
  import Goods from "components/content/goods/Goods";
  import Scroll from "components/common/scroll/Scroll";
  import BackTop from "components/common/backTop/BackTop";

  import HomeSwiper from "./childComps/HomeSwiper";
  import HomeRecommend from "./childComps/HomeRecommend";
  import Feature from "./childComps/Feature";

  import {getHomeMultidata, getTypeDate} from "network/home";
  import {itemListenerMixin} from '@/mixin'
  import {itemImgLoad} from '@/bus/busName'

  export default {
    name: "Home",
    components: {
      NavBar,
      HomeSwiper,
      HomeRecommend,
      Feature,
      TabControl,
      Goods,
      Scroll,
      BackTop
    },
    data() {
      return {
        bannerList: [],
        recommendList: [],
        titles: ['流行', '新款', '精选'],
        goods: {
          'pop': {page: 0, list: []},
          'new': {page: 0, list: []},
          'sell': {page: 0, list: []}
        },
        clickIndex: 0,
        isShowBackTop: false,
        tabOffSetTop: 0,  // 吸顶效果，距离顶部距离
        isTabFixed: false,  // 是否吸顶
        saveY: 0,  // 缓存中better-scroll滑动的距离
        itemImgHandle: null
      }
    },
    computed: {
      goodList() {
        switch (this.clickIndex) {
          case 0:
            return this.goods['pop'].list;
          case 1:
            return this.goods['new'].list;
          case 2:
            return this.goods['sell'].list;
        }
      },
      type() {
        switch (this.clickIndex) {
          case 0:
            return 'pop';
          case 1:
            return 'new';
          case 2:
            return 'sell';
        }
      }
    },
    mixins: [itemListenerMixin],
    created() {
      // 获取轮播图数据
      this.getHomeMdata();

      // 获取流行、新款、精选数据
      this.getTDate('pop');
      this.getTDate('new');
      this.getTDate('sell');
    },
    activated() {
      // 缓存之后，必须刷新，否则回退时会返回顶部
      this.$refs.scroll.refresh()
      this.$refs.scroll.scrollTo(0, this.saveY, 1); // 时间不能为0
    },
    deactivated() {
      // 缓存页面，离开前，记录scroll组件y轴滑动的距离
      this.saveY = this.$refs.scroll.getScrollY()

      // 销毁订阅的事件
      this.$bus.$off(itemImgLoad, this.itemImgHandle)
    },
    methods: {
      // 监听轮播图图片加载完毕事件，获取流行、新款、精选标题距离顶部高度
      swiperImageLoad() {
        this.tabOffSetTop = this.$refs.tabControl2.$el.offsetTop

        // 轮播图加载完毕，刷新一次
        this.$refs.scroll.refresh()
      },

      // 获取轮播图数据
      getHomeMdata() {
        getHomeMultidata().then(value => {
          this.bannerList = value.data.banner.list;
          this.recommendList = value.data.recommend.list;
        });
      },

      // 获取流行、新款、精选数据
      getTDate(type) {
        const page = this.goods[type].page + 1;
        getTypeDate(type, page).then(value => {
          this.goods[type].list.push(...value.data.list);
          this.goods[type].page += 1;

          // 结束上拉加载
          this.$refs.scroll.finishPullUp()
        });
      },

      // 点击选择'流行', '新款', '精选'哪一个
      clickGood(i) {
        this.clickIndex = i
        this.$refs.tabControl1.i = i
        this.$refs.tabControl2.i = i
      },

      // 返回顶部事件
      backTop() {
        this.$refs.scroll.scrollTo(0, 0, 1000)
      },

      // 根据滑动位置，显示隐藏向上按钮
      scrollPosition(position) {
        const {y} = position;
        // 判断向上箭头是否显示
        this.isShowBackTop = y < -500

        // 判断流行、新款、精选标题组件是否吸顶
        this.isTabFixed = -y > this.tabOffSetTop
      },

      loadMore() {
        this.getTDate(this.type)
      }
    }
  }
</script>

<style scoped>
  .home {
    height: 100vh;
    position: relative;
  }

  .tabCon1 {
    position: fixed;
    top: 44px;
    left: 0;
    right: 0;
    z-index: 99;
    background-color: #fff;
  }

  .wrapper {
    position: absolute;
    top: 44px;
    bottom: 50px;
    left: 0;
    right: 0;
  }

  /*.wrapper{*/
  /*  height: calc(100% - 94px);*/
  /*  overflow: hidden;*/
  /*  margin-top: 44px;*/
  /*}*/


</style>
